<template>
    <div class="section_common">
        <!--<el-row type="flex" class="row-bg" justify="end">
            <el-col v-if="nowUser == '1303252781460627458'" :span="4">
                <el-col :span="4">
                    <el-button type="primary" round size="mini" @click="goPage('UserApprove')"><i
                            class="el-icon-receiving"></i>去审核
                    </el-button>
                </el-col>
            </el-col>
            <el-col :span="4">
                <el-col :span="4">
                    <el-button type="success" round size="mini" @click="goPage('UserSubmit')"><i
                            class="el-icon-receiving"></i>已提交
                    </el-button>
                </el-col>
            </el-col>

        </el-row>-->
        <div class="main">
            <el-form label-width="100px" :model="needApply" :rules="rules" ref="needApply">
                <el-form-item label="课程名称" prop="courseOrTrainType">
                    <el-input v-model="needApply.courseOrTrainType" size="mini"></el-input>
                </el-form-item>
                <el-form-item label="申请原因" prop="applyReason" >
                    <el-input type="textarea" v-model="needApply.applyReason" size="mini"></el-input>
                </el-form-item>
                <el-form-item label="期望课程内容"  prop="applyContent">
                    <el-input type="textarea" v-model="needApply.applyContent" size="mini"></el-input>
                </el-form-item>

                <van-steps direction="vertical" :active="active" active-icon="checked" active-color="#38f">
                    <van-step v-show="show">
                        <h3>审批人</h3>
                        <van-image v-for="(item,index) in spLd" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
                            <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
                        </van-image>
                    </van-step>
                </van-steps>
                <el-form-item>
                    <el-button type="primary" size="mini" @click="submitForm('needApply')"
                    >提交
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    import {Image as VanImage,Toast} from "vant";
    import Vue from "vue";
    Vue.use(VanImage);

    export default {
        data() {
            return {
                active: -1,
                show:false,
                spLd:[],
                needApply: {
                    courseOrTrainType: '', //课程
                    applyReason: '', //申请原因
                    applyContent: '',  //期望的内容
                    applyUser: JSON.parse(localStorage.getItem('userInfo')).userId,

                },
                rules: {
                    applyReason: [
                        {required: true, message: '请输入申请原因', trigger: 'blur'}
                    ],
                    courseOrTrainType: [
                        {required: true, message: '请输入课程名称', trigger: 'blur'}
                    ],
                    applyContent: [
                        {required: true, message: '请输入期望的内容', trigger: 'blur'}
                    ]
                },
                sendNeedApplyUrl: "/mobiles/sendNeedApply", //提交申请Url
                type: this.$route.params.type,
                nowUser: JSON.parse(localStorage.getItem('userInfo')).userId,
            }
        },
        created() {
            //根据地区获取页面审批人
            this.selSpLeaderByNowUser();
        },
        methods: {
            //根据申请人的id找到对应的审批人
            selSpLeaderByNowUser(){
                this.$https.post('/mobiles/getNeedApplySpLeader', {
                    nowUser:this.nowUser
                }).then((res)=>{
                    console.log(res)
                    console.log(res.data.data)
                    //展示审批流程
                    if (res.data.data && res.data.data.length>0){
                        this.show=true;
                        this.spLd=res.data.data;
                    }else{
                        this.show=false;
                        this.spLd=[];
                    }
                }).catch(err => {
                    console.log(err);
                })
            },
            //去相关页面
            goPage(name) {
                this.$router.push({
                    name, params: {type: 'needsToApplyList'}
                });
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        var that = this;
                        this.$https
                            .post(this.sendNeedApplyUrl, {
                                userAccount: this.nowUser, //申请用户
                                needApplyParam: JSON.stringify(this.needApply),
                                /* applyType: this.needApply.applyType, //1课程 2培训师
                                 courseOrTrainType: this.courseOrTrainType, //课程或培训师类型
                                 applyReason: this.applyReason,
                                 applyContent: this.applyContent,*/
                                /*  isNotHadLesson: this.isNotHadLesson,*/
                            }).then(res => {
                            if (res.data.code == 200) {
                                that.$router.go(-1);
                                Toast(res.data.data);
                            } else if (res.data.code == 500) {
                                Toast(res.data.message);
                            }
                        }).catch(err => {
                            console.log(err);
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            go() {
                this.$router.go(-1)
            }
        },
        watch: {
            'needApply.applyType'(newVal, oldVal) {
                if (newVal != oldVal) {
                    this.needApply.courseOrTrainType = "";
                    this.needApply.applyContent = "";
                    this.needApply.hasExperience = "";
                    this.needApply.strongRegion = "";
                    this.needApply.hadTrainCourse = "";
                }
            }
        },
        beforeRouteLeave(to, from, next) {
            to.params.activeName = '培训管理';
            next();
        },
    };
</script>

<style lang="scss" scoped>
    .main {
        background-color: white;

        .el-form {
            padding-right: 10px;

            .el-form-item {
                .el-form-item__label {
                    line-height: 16px;
                }

                margin-bottom: 20px;
            }
        }
    }
</style>
